<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script src="../vue.js"></script>
</head>
<body>
<div id="app">

  <h1>{{msg}}</h1>
  <h2>自动改变数值:{{count}}</h2>
  <button @click="secAdd">开始每秒累加1</button>
  <button @click="stopAdd">停止增加</button>
  <hr>
  <!--  传递参数-->
<!--  同过在data中初始化一个数据可以做到数据同步以及更改-->
  <button @click="stepAdd(step)">每次增加{{step}}</button>
  <button @click="changeStep">更改每次增加的值</button>
  <button @click="rest">重置</button>
  <hr>
<!--  事件对象-->
<!--  不写括号的事件函数第一个形参默认为事件对象event-->
  <h2 @click="lookEventF">展示事件对象1</h2>
<!--  书写了括号的事件函数，形参中不存在event-->
  <h2 @click="lookEventS(1,2)">展示事件对象2</h2>
<!--  当事件函数书写括号的时候又需要事件对象可以在实参的位置书写 $event-->
  <h2 @click="lookEventT(3,4,$event)">展示事件对象3</h2>
</div>

<script>
  Vue.config.productionTip = false;
  const vm = new Vue({
    el: '#app',
    data() {
      return {
        msg: 'hello Vue~~~',
        count: 0,
        timeId: null,
        step: 2
      }
    },
    methods: {
      secAdd() {
        clearInterval(this.timeId)
        this.timeId = setInterval(() => {
          this.count++
        }, 1000)
      },
      stopAdd() {
        clearInterval(this.timeId)
        console.log(this.timeId)
      },
      stepAdd(step) {
        this.count += step
      },
      changeStep() {
        this.step = parseInt(prompt('请输入想要更改的数字'))
      },
      rest() {
        this.count = 0
      },
      lookEventF(e){
        console.log('event',e)
      },
      lookEventS(a,b,e){
        console.log('a',a)
        console.log('b',b)
        console.log('event',e)
      },
      lookEventT(a,b,c){
        console.log('a',a)
        console.log('b',b)
        console.log('event',c)
      }
    }
  })
</script>

</body>
</html>